<template>
    <div id="force-container" class="force-page"></div>
</template>
<script setup>
import { ref, defineComponent, h, render, createVNode } from 'vue'
import { v4 as uuidv4 } from 'uuid'
import { Graph, ExtensionCategory, register } from '@antv/g6'
// import { VueNode } from 'g6-extension-vue';
import Node01 from './Node01.vue'
import { NButton } from 'naive-ui'

// register(ExtensionCategory.NODE, 'vue-node', VueNode);

const id = ref(uuidv4())

console.log(id)

const data = {
    nodes: [
        { id: 'node1', size: 50 },
        { id: 'node2', size: 50 },
        { id: 'node3', size: 50 },
        { id: 'node4', size: 50 },
        { id: 'node5', size: 50 },
    ],
    edges: [
        { source: 'node1', target: 'node2' },
        { source: 'node1', target: 'node3' },
        { source: 'node1', target: 'node4' },
        { source: 'node1', target: 'node5' }
    ],
}

const graph = new Graph({
    container: 'force-container',
    data,
    node: {
        type: 'html',
        style: {
            innerHTML: (d) => {
                const dom = defineComponent({
                    render() {
                        return h(NButton, { type: 'primary' }, 'BUTTON')
                    },
                })

                const vm = createVNode(dom)
                render(vm, document.createElement('div'))

                console.log(vm)

                return vm.el
            },
        },
    },
    edge: {
        style: {
            badgeText: 'xada',
            endArrow: true,
        },
    },
    layout: {
        type: 'd3-force',
        link: {
            distance: 150,
        },
    },
    behaviors: ['drag-element-force'],
})

graph.render()
</script>
<style lang="less" scoped>
.force-page {
    height: 600px;
}
</style>
